<template>
	<view class="content">
		<view class="searchBox">
			<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/left.png" @click="back"></image>
			<!--  #ifdef MP-WEIXIN -->
			<view class="searchbg_wx" :style="{'left':'49rpx','top':searchTop +'rpx'}">
				<input type="text" placeholder="输入一个关键词试试" v-model.trim="searchValue"
					placeholder-class="search_placeholder" />
				<view class="text" @click="search">搜索</view>
			</view>
			<!--  #endif -->
			<!--  #ifdef APP-PLUS -->
			<view class="searchbg">
				<input type="text" placeholder="输入一个关键词试试" v-model.trim="searchValue"
					placeholder-class="search_placeholder" />
				<view class="text" @click="search">搜索</view>
			</view>
			<!--  #endif -->
		</view>
		<view class="bottomBox">
			<!-- 输入框没有输入值 -->
			<view class="noValue" v-if="haveSearch == -1">
				<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/search1.png"></image>
				<text>请输入你需要搜索的内容</text>
				<text>更多精彩即将呈现</text>
			</view>
			<!-- 输入框没有搜索到 -->
			<view class="nosearchbox" v-if="haveSearch == 0">
				<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/search2.png" mode=""></image>
				<text>没有您搜索的内容？</text>
				<text>点击下方按钮帮组我们完善已知吧！</text>
				<view class="btn" @click="asked">立即提问</view>
			</view>
			<!-- 搜索有内容 -->
			<view class="haveSearch" v-if="haveSearch == 1">
				<!-- 已知小课 -->
				<view class="search_course" v-if="searchData.resourceList.length !== 0">
					<view class="title">
						<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/point.png" mode=""></image>
						<text>已知小课</text>
					</view>
					<view class="course_content" v-for="(item, index) in searchData.resourceList" :key="index"
						@click="courseItemDetail(item)">
						<view class="top_box">
							<image :src="item.coverImg"></image>
							<view class="right">
								<view class="text">{{ item.resourceName }}</view>
								<view class="price">
									<text>￥</text>
									<view class="">{{ item.coursePrice }}</view>
								</view>
							</view>
						</view>
						<view class="bottom_box">
							<view class="left">
								<text>讲师：</text>
								<view>{{ item.lecturerName }}</view>
							</view>
							<view class="right">
								<view class="see">
									<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/watch.png" mode="">
									</image>
									<text>{{ item.watchNum }}</text>
								</view>
								<view class="good">
									<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/praiseIcon.png"
										mode=""></image>
									<text>{{ item.greatNum }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<!-- 已知话题 -->
				<view class="search_topic" v-if="searchData.dynamicList.length !== 0">
					<view class="title">
						<image src="https://yzxk.oss-cn-hangzhou.aliyuncs.com/images/point.png"></image>
						<text>已知话题</text>
					</view>
					<!-- 话题应该是循环 -->
					<view class="item_topic" v-for="(item, index) in searchData.dynamicList" :key="index"
						@click="topicItemDetail(item)">
						<view class="user">
							<view class="avatar">
								<image :src="item.headPortrait"></image>
								<text>{{ item.nickName + '发布' }}</text>
							</view>
							<text>{{ item.readNum + `参与` }}</text>
						</view>
						<view class="topic_box">
							<text class="title">{{ item.title }}</text>
							<view class="bg">{{ item.content }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		searchCourse
	} from '@/apis/apis.js';
	export default {
		name: '',
		components: {},
		props: {},
		data() {
			return {
				searchValue: null,
				haveSearch: -1, //0(搜索没内容) 1（搜索有内容）-1（没输入值）
				barTop: 0,
				barHeight: 0,
				searchTop: 0,
				barBottom: 0,
				//模拟搜索出来的数据
				searchData: {
					resourceList: [],
					dynamicList: []
				}
			};
		},
		methods: {
			//返回上一页
			back() {
				uni.navigateBack();
			},
			//点击立即提问跳转页面
			asked() {
				uni.navigateTo({
					url: '../questions/questions'
				});
			},
			//搜索
			search() {
				if (!this.searchValue) {
					return;
				}
				searchCourse(this.searchValue).then(res => {
					console.log(res.data);
					this.searchData.resourceList = res.data.resourceList;
					this.searchData.dynamicList = res.data.dynamicList;
					if (!this.searchData.resourceList &&
						!this.searchData.dynamicList) {
						this.haveSearch = 0;
					} else if (this.searchData.resourceList == 0 && this.searchData.dynamicList == 0) {
						this.haveSearch = 0;
					} else {
						this.haveSearch = 1;
					}
				});
			},
			//搜索的课程详情
			courseItemDetail(item) {
				console.log(item);
				uni.navigateTo({
					url: '../courseItem/courseItem?id=' + item.id
				});
			},
			//搜索的话题详情
			topicItemDetail(item) {
				console.log(item);
				uni.navigateTo({
					url: '../../topic/topicDetail/topicDetail?id=' + item.id
				});
			}
		},
		mounted() {},
		onLoad(options) {
			function pxToRpx(px) {
				const screenWidth = wx.getSystemInfoSync().screenWidth
				return px * 750 / screenWidth
			}
			// #ifdef MP-WEIXIN
			let res = uni.getMenuButtonBoundingClientRect()
			this.barHeight = res.height
			this.barTop = res.top
			this.barBottom = res.bottom
			this.searchTop = pxToRpx((this.barTop + this.barBottom) / 2) - 25;
			this.c = res.bottom * 2 + 4 + 'rpx'
			// #endif
			// console.log(options)
		},
		filters: {},
		computed: {},
		watch: {},
		directives: {}
	};
</script>

<style scoped lang="scss">
	.content {
		width: 100%;
		height: 100vh;
		background: #194FC9;

		.searchBox {
			width: 92%;
			margin: 0 auto;
			padding-top: 94rpx;
			// padding-top: 6.75vh;
			display: flex;
			align-items: center;

			&>image {
				width: 20rpx;
				height: 38rpx;
				margin-right: 20rpx;
			}

			.searchbg_wx {
				// width: 85.6%;
				width: 442rpx;
				height: 76rpx;
				padding: 0 10rpx 0 26rpx;
				border-radius: 38rpx;
				background: #fff;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.search_placeholder {
					font-size: 28rpx;
					font-family: Source Han Sans CN;
					color: #aaaaaa;
				}

				.text {
					// margin-right: 200rpx;
					width: 110rpx;
					height: 60rpx;
					background: #e0f2ff;
					border-radius: 30rpx;
					color: #369cfe;
					font-size: 30rpx;
					text-align: center;
					line-height: 60rpx;
				}
			}

			.searchbg {
				// width: 85.6%;
				width: 642rpx;
				height: 76rpx;
				padding: 0 10rpx 0 26rpx;
				border-radius: 38rpx;
				background: #fff;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.search_placeholder {
					font-size: 28rpx;
					font-family: Source Han Sans CN;
					color: #aaaaaa;
				}

				.text {
					// margin-right: 200rpx;
					width: 110rpx;
					height: 60rpx;
					background: #e0f2ff;
					border-radius: 30rpx;
					color: #369cfe;
					font-size: 30rpx;
					text-align: center;
					line-height: 60rpx;
				}
			}
		}

		.bottomBox {
			width: 100%;
			border-radius: 20rpx 20rpx 0 0;
			background: #fff;
			position: absolute;
			bottom: 0;
			left: 0;
			right: 0;
			top: 184rpx;
			overflow: hidden;
			overflow-y: visible;

			.noValue {
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;

				&>image {
					width: 234rpx;
					height: 236rpx;
					margin: 46rpx 0 32rpx 0;
				}

				&>text {
					color: #303030;
					font-size: 26rpx;
					line-height: 42rpx;
				}
			}

			.nosearchbox {
				width: 56.4%;
				margin: 40rpx 176rpx 0 152rpx;
				display: flex;
				flex-direction: column;
				align-items: center;

				&>image {
					width: 422rpx;
					height: 258rpx;
					margin-bottom: 40rpx;
				}

				&>text {
					color: #303030;
					font-size: 26rpx;
					line-height: 42rpx;
				}

				.btn {
					width: 388rpx;
					height: 90rpx;
					background: #194FC9;
					box-shadow: 0 12rpx 16rpx 0 rgba(82, 163, 255, 0.3);
					border-radius: 46rpx;
					text-align: center;
					line-height: 90rpx;
					color: #fff;
					margin-top: 62rpx;
				}
			}

			.haveSearch {
				margin-top: 20px;
				padding: 0 4%;
				height: auto;
				overflow: hidden;
				overflow-y: visible;

				.search_course {
					width: 100%;
					margin: 34rpx 0 52rpx 0;

					.title {
						display: flex;
						align-items: center;
						color: #303030;
						font-size: 32rpx;
						font-family: Source Han Sans CN;
						font-weight: 500;
						margin-bottom: 28rpx;

						&>image {
							width: 32rpx;
							height: 32rpx;
							margin-top: 10rpx;
						}
					}

					.course_content {
						padding: 26rpx 34rpx 8rpx 26rpx;
						background: #ffffff;
						box-shadow: 0rpx 8rpx 26rpx 0rpx rgba(127, 129, 133, 0.15);
						border-radius: 20rpx;
						margin-bottom: 20rpx;

						.top_box {
							display: flex;
							height: 146rpx;

							&>image {
								width: 220rpx;
								height: 146rpx;
								border-radius: 10rpx;
								background: #369cfe;
							}

							.right {
								color: #111111;
								font-size: 30rpx;
								padding: 0 0 0 28rpx;
								height: 146rpx;
								display: flex;
								flex-direction: column;
								justify-content: space-between;

								.text {
									margin-top: 2rpx;
									width: 354rpx;
									line-height: 44rpx;
									word-break: break-all;
									overflow: hidden;
									text-overflow: ellipsis;
									display: -webkit-box;
									display: -moz-box;
									-webkit-line-clamp: 2;
									-webkit-box-orient: vertical;
									-moz-line-clamp: 2;
									-moz-box-orient: vertical;
								}

								.price {
									margin-left: 2rpx;
									color: #ffa025;
									font-size: 36rpx;
									display: flex;
									align-items: baseline;

									&>text {
										font-size: 22rpx;
									}
								}
							}
						}

						.bottom_box {
							margin-top: 28rpx;
							display: flex;
							justify-content: space-between;
							align-items: center;
							color: #b0b0b0;
							font-size: 22rpx;

							.left {
								display: flex;
								align-items: center;
								font-size: 26rpx;

								&>text {
									color: #4a4a4a;
								}
							}

							.right {
								display: flex;

								.see {
									display: flex;
									align-items: center;
									margin-right: 54rpx;

									&>image {
										width: 26rpx;
										height: 18rpx;
										margin-right: 4rpx;
									}
								}

								.good {
									display: flex;
									align-items: center;

									&>image {
										width: 26rpx;
										height: 18rpx;
										margin-right: 4rpx;
									}
								}
							}
						}
					}
				}

				.search_topic {
					width: 100%;

					// margin:34rpx 0 52rpx 0;
					.title {
						display: flex;
						align-items: center;
						color: #303030;
						font-size: 32rpx;
						font-family: Source Han Sans CN;
						font-weight: 500;
						margin-bottom: 28rpx;

						&>image {
							width: 32rpx;
							height: 32rpx;
							margin-top: 10rpx;
						}
					}

					.item_topic {
						// width: 100%;
						background: #fff;
						box-shadow: 0rpx 8rpx 26rpx 0rpx rgba(127, 129, 133, 0.15);
						border-radius: 20rpx;
						margin-bottom: 30rpx;

						.user {
							width: 100%;
							height: 104rpx;
							padding: 24rpx 22rpx 22rpx 24rpx;
							border-bottom: 2rpx dashed #e5eae9;
							color: #7e7e7e;
							font-size: 26rpx;
							display: flex;
							justify-content: space-between;
							align-items: center;

							.avatar {
								display: flex;
								align-items: center;

								&>image {
									width: 60rpx;
									height: 60rpx;
									border-radius: 50%;
									margin-right: 18rpx;
								}
							}
						}

						.topic_box {
							color: #303030;
							font-family: Source Han Sans CN;
							font-size: 34rpx;
							padding: 30rpx 22rpx 26rpx 24rpx;

							.title {
								word-break: break-all;
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-line-clamp: 2; // 控制多行的行数
								-webkit-box-orient: vertical;
							}

							.bg {
								background: #eaf9ff;
								opacity: 0.8;
								border-radius: 10rpx;
								color: #79a6da;
								font-size: 28rpx;
								line-height: 46rpx;
								padding: 0 25rpx;
								margin-top: 30rpx;
								word-break: break-all;
								overflow: hidden;
								text-overflow: ellipsis;
								display: -webkit-box;
								-webkit-line-clamp: 2; // 控制多行的行数
								-webkit-box-orient: vertical;
							}
						}
					}
				}
			}
		}
	}
</style>